<template>
  <headPage :tabsIndex="3"></headPage>
  <div class="main_box">
    <div class="navigate_view" v-if="type == 1 || type == 2">
      <span class="navigate_text" @click="goHome">首页</span>
      <span class="navigate_line">/</span>
      <span class="navigate_last_text" v-if="type == 1">就业喜报</span>
      <span class="navigate_last_text" v-if="type == 2">学员作品</span>
    </div>
    <div class="professional" :class="type == 0 ? 'professional_2' : ''">
      <div class="search_input">
      <div class="search">
        <div class="search_le">
          <el-input
            v-model="keyword"
            placeholder="请输入学员姓名"
            placeholder-style="color:#999;font-size:10px;"
            @keyup.enter="goSearch"
          />
        </div>
        <div class="search_ri" @click="goSearch">
          <span>搜索</span>
        </div>
      </div>
      </div>
    </div>
    <!-- </div>
      <div class="classification">
        <div class="class_title">专业：</div>
        <div class="class_type">
          <div
            @click="select2(item.aid)"
            class="class_type_item"
            :class="major_id == item.aid ? 'active_item' : ''"
            v-for="(item, index) in majorTabs"
            :key="index"
          >
            {{ item.zhuanyemingcheng }}
          </div>
        </div>
      </div>
    </div> -->

    <div class="list_content" v-loading="loading">
      <!-- <div class="graduation_date">
        <div class="date_1">毕业时间筛选</div>
        <div class="date_2">
          <el-date-picker
            :clearable="false"
            v-model="date"
            type="daterange"
            range-separator=" - "
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD"
            size="small"
            @change="dateChange"
          />
          <img src="../../assets/default/11.png" alt="" />
        </div>
      </div> -->
      <template v-if="type == 0 || type == 1">
        <div class="list">
          <template v-for="(item, index) in graduatesList" :key="index">
            <outstandingGraduates :item="item"></outstandingGraduates>
          </template>
        </div>
        <div class="no_data" v-if="graduatesList.length == 0 && !loading">
          <img class="no_img" src="../../assets/default/12.png" alt="" />
        </div>
      </template>
      <template v-if="type == 2">
        <div class="list">
          <template v-for="(item, index) in worksList" :key="index">
            <studentWorks :item="item"></studentWorks>
          </template>
        </div>
        <div class="no_data" v-if="worksList.length == 0 && !loading">
          <img class="no_img" src="../../assets/default/12.png" alt="" />
        </div>
      </template>
    </div>
    <div class="paging_content">
        <paging
        :total="total"
        :pageSize="pageSize"
        @pageChange="pageChange"
        ></paging>
      </div>
  </div>
  <footerPage></footerPage>
</template>

<script name="graduate" setup>
import {
  post65e5adabd1a1b,
  post65e6eeeb5c499,
  post65e84046246d6,
} from "@/utils/api.js";
import { ref, reactive, onMounted, inject } from "vue";
import headPage from "@/components/headPage.vue";
import footerPage from "@/components/footerPage.vue";
import outstandingGraduates from "@/components/outstandingGraduates.vue";
import studentWorks from "@/components/studentWorks.vue";
import paging from "@/components/paging.vue";

import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const injectMessage = inject("$message");
let keyword = ref("");
let date = ref("");
let major_id = ref("");
let biyeshijian = ref("");
let type = route.query.type; 
keyword.value = route.query.keyword,
type = route.query.type,  // 0 首页点击跳转  1 就业喜报  2学员作品
major_id = route.query.major_id,
biyeshijian = route.query.biyeshijian


onMounted(() => {
  getList();
});

function select2(aid) {
  major_id.value = aid;
  pageNum.value = 1;
  loading.value = true;
  getList();
}

// 数据列表
let graduatesList = reactive([]);
let worksList = reactive([]);
let total = ref(0);
let loading = ref(true);
let pageNum = ref(1);
let pageSize = ref(8);
function getList() {
  if (type == 0 || type == 1) {
    post65e6eeeb5c499({
      xueyuanxingming: keyword.value,
      biyeshijian: biyeshijian.value,
      freeprofessionalmanagement_id: major_id.value == -1 ? "" : major_id.value,
      page: pageNum.value,
      list_rows: pageSize.value,
    }).then((res) => {
      //   console.log(res);
      loading.value = false;
      if (res.code == 1) {
        total.value = res.data.total;
        graduatesList = res.data.data;
      }
    });
  } else if (type == 2) {
    post65e84046246d6({
      freeemploymentinformation_xueyuanxingming: keyword.value,
      freeemploymentinformation_biyeshijian: biyeshijian.value,
      freeprofessionalmanagement_id: major_id.value == -1 ? "" : major_id.value,
      page: pageNum.value,
      list_rows: pageSize.value,
    }).then((res) => {
      //   console.log(res);
      loading.value = false;
      if (res.code == 1) {
        total.value = res.data.total;
        worksList = res.data.data;
      }
    });
  }
}
// 分页
function pageChange(page) {
  pageNum.value = page;
  loading.value = true;
  getList();
}

// 选择时间
function dateChange(e) {
  biyeshijian.value = e[0] + "/" + e[1];
  loading.value = true;
  getList();
}

function goSearch() {
  if (!keyword.value) {
    injectMessage.error("请输入学员姓名");
    return;
  }
  loading.value = true;
  getList();
}
function goHome() {
  router.go(-2);
}
</script>

<style lang="scss" scoped>
.navigate_view {
  margin-top: 97px;
  display: flex;
  align-items: center;
  padding: 13.5px 0 12px 0;
  .navigate_text {
    font-size: 9px;
    color: #666;
    cursor: pointer;
  }
  .navigate_line {
    font-size: 9px;
    color: #bfbfbf;
    margin: 0 5px;
  }
  .navigate_last_text {
    font-size: 9px;
    color: #1f52ae;
    cursor: pointer;
  }
}
.professional_2 {
  margin-top: 110px;
}
.professional {
  .search_input {
    background: #fff;
    padding: 20px 0 14px;
    display: flex;
    justify-content: center;
    .search {
      width: 524px;
      height: 30px;
      background: #f6f7f9;
      border-radius: 3px;
      display: flex;
      align-items: center;
      .search_le {
        font-size: 10px;
        width: 459px;
      }
      .search_ri {
        width: 65px;
        height: 30px;
        position: relative;
        background: #1f52ae;
        border-radius: 0px 3px 3px 0px;
        font-size: 10px;
        color: #fff;
        cursor: pointer;
        text-align: center;
        line-height: 30px;
      }
    }
  }
  .classification {
    display: flex;
    // align-items: center;
    .class_title {
      width: 45px;
      margin-right: 12px;
      font-size: 9px;
      margin-bottom: 16px;
      padding: 5.5px 0;
    }
    .class_type {
      width: calc(100% - 57px);
      overflow: hidden;

      .class_type_item {
        float: left;
        margin-right: 12px;
        font-size: 9px;
        margin-bottom: 16px;
        padding: 5.5px 5px;
        border-radius: 3px;
        background: #fff;
        cursor: pointer;
      }
      .active_item {
        font-size: 9px;
        margin-bottom: 16px;
        padding: 5.5px 5px;
        border-radius: 3px;
        background: #1f52ae;
        color: #fff;
      }
    }
  }
}
.list_content {
  min-height: 300px;
  margin-top: 16px;
  .graduation_date {
    display: flex;
    align-items: center;
    margin-bottom: 13px;
    .date_1 {
      font-size: 9px;
      margin-right: 9px;
    }
    .date_2 {
      font-size: 9px;
      width: 116px;
      height: 24px;
      display: flex;
      align-items: center;
      background: #fff;
      border-radius: 3px;
      padding: 0 3px 0 0;
      img {
        width: 6px;
        height: 6px;
      }
    }
  }
  .list {
    overflow: hidden;
  }
  .paging_content {
    margin: 0 0 20px;
  }
}
</style>

